// The ui-variables file is provided by base themes provided by Atom.
//
// See https://github.com/atom/atom-dark-ui/blob/master/styles/ui-variables.less
// for a full listing of what's available.
@import "ui-variables";
@import "syntax-variables";
@import (less, optional) "../node_modules/react-table/react-table.css";

// -------------- Colors ------------------
@hydrogen-light-background: fadein(lighten(@syntax-background-color, 40%), 100%);
@hydrogen-dark-background: fadein(lighten(@syntax-background-color, 10%), 100%);

@hydrogen-inline-background: contrast(@syntax-text-color, @hydrogen-dark-background, @hydrogen-light-background, 20%);
@hydrogen-inline-color: lighten(@syntax-text-color, 10%);
@hydrogen-error-color: average(@syntax-text-color, red);


.hydrogen.marker {
  display: flex;
}

.hydrogen {

// -------------- Globals -----------------

code, pre {
  color: inherit;
  background: inherit;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
  white-space: pre;
}

img {
  background-color: white;
}

img, svg, video, audio {
  display: block;
}

table {
  border: 1px double average(@syntax-text-color, @base-border-color);
  border-collapse: collapse;

  thead, tbody, tr {
    border: inherit;
  }

  td, th {
    border: inherit;
    padding: 0.35em 0.7em;
  }
}

svg:first-child {
  background-color: white;
}

.markdown {
  font-family: @font-family;
  code {
    color: @hydrogen-inline-color;
    background-color: @hydrogen-inline-background;
    font-family: var(--editor-font-family);
  }
}

.MathJax_SVG_Display {
  margin: 0;
}

.MathJax_SVG {
  .noError {
    padding: 0;
    border: none;
    color: @hydrogen-error-color
  }
  svg {
    background-color: unset;
    margin: 0 !important;
    display: inline;
  }
}

.js-plotly-plot {
  svg {
    background-color: unset;
  }
}

.nteract-display-area-stderr {
  color: @hydrogen-error-color;
}

// ----------- Inline Output --------------

.inline-container {
  color: @hydrogen-inline-color;
  background: @hydrogen-inline-background;
  border-radius: @component-border-radius;
  box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
}

.inline-container .hydrogen_cell_display {
  padding: 0 0.25em 0 0.25em;
}

.inline-container.icon::before {
  font-size: 80%;
  width: 1.2em;
  margin: 0;
  text-align: center;
  height: 100%;
}

// ---------- Multiline Output ------------

.multiline-container {
  display: flex;
  border: solid 1px @base-border-color;
  &[hydrogen-wrapoutput="true"] {
    code, pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}

.multiline-container .hydrogen_cell_display {
  padding: @component-padding;
  // Style fix for plotly toolbar
  .cell_display {
    overflow-y: hidden;
    display: initial;
    height: 100%;
  }
  .modebar-group {
    display: flex;
  }
}

.multiline-container .toolbar {
  border-left: solid 1px @base-border-color;
  display: flex;
  flex-direction: column;
}

.multiline-container .toolbar > :not(:first-child) {
  border-top: solid 1px @base-border-color;
}

.multiline-container .toolbar .icon::before {
  margin: 0;
  width: 2.5em;
  line-height: 2.5em;
  height: 2.5em;
  cursor: pointer;
  text-align: center;
}

.multiline-container .toolbar .icon:hover {
  color: @hydrogen-inline-color;
}

// -------------- Spinner -----------------
.spinner {
  padding: 0 0.5em 0 0.5em;
}

.spinner > div {
  background-color: @hydrogen-inline-color;
  height: 100%;
  width: 2px;
  display: inline-block;
  margin-left: 1px;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect1 {
  margin-left: 0px;
}

.spinner .rect2 {
  animation-delay: -1.1s;
}

.spinner .rect3 {
  animation-delay: -1.0s;
}

.spinner .rect4 {
  animation-delay: -0.9s;
}

.spinner .rect5 {
  animation-delay: -0.8s;
}

@keyframes stretchdelay {
  0%, 40%, 100% { transform: scaleY(0.32);}
  20% { transform: scaleY(0.8); }
}

// -------------- Sidebar -----------------

.sidebar {
  padding: 10px;

  .multiline-container {
    width: 100%;
    overflow: auto;
    padding: @component-padding;

    // Style fix for plotly toolbar
    .modebar-group {
      display: flex;
    }
  }

  .plot-container.plotly svg {
    width: inherit !important;
    height: inherit !important;
  }

  video, img, svg {
    width: unset !important;
    height: unset !important;
    max-width: 100% !important;
  }
}

// ------------ History Component ---------

.history {

  display: flex;
  flex-direction: column;

  .slider {
    .btn-xs.icon {
      position: absolute;
      &.icon-chevron-left {
        left: @component-padding;
      }
      &.icon-chevron-right {
        right: @component-padding;
      }
    }
    .current-output {
      text-align: center;
    }

    .input-range {
      cursor: pointer;

      &::-webkit-slider-thumb {
        -webkit-appearance: none;
        background: @background-color-selected;
      }

      &:focus {
        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          background-color: @button-background-color-selected;
          border: 1px solid @background-color-selected;
        }
        &::-webkit-slider-runnable-track {
          -webkit-appearance: none;
          background: @background-color-selected;
        }
      }
    }
  }
}

// ------------ Output Area ---------------

.output-area {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;


  .multiline-container {
    font-family: monospace;
    display: block;
    flex: 0 1 auto;
  }
  .scroll-list {
    .cell_display {
      height: 100%;
      padding: 0;

      > div {
        margin-bottom: 10px;
        margin-top: 10px;
      }
    }
  }
}



// ----------- Kernel Monitor -------------

.kernel-monitor {
  .table-header {
    font-weight: bold;
  }

  .icon::before {
    padding-right: 10px;
    padding-left: 10px;
    display: table-cell;
  }

  .icon:hover {
    color: @text-color-error;
  }
}

// -------------- Watches -----------------

.watch-sidebar {
  overflow-y: auto;
  height: 100%;

  .watch-view {
    .watch-input {
      margin-top: 10px;
      padding: 3px;
      border-radius: 3px;
      background-color: @syntax-background-color;
      font-size: @font-size;
      min-height: 3em;
      border: 1px solid @base-border-color;
    }
  }

  .btn-group {
    margin-top: 10px;
    display: block;
    .btn {
      width: 50%;
    }
  }

  .multiline-container {
    max-height: 450px;
  }

  video, img, svg {
    max-height: 450px !important;
  }
}

// -------------- Autocomplete-Plus inside Watches -----------------

.autocomplete-plus {
  img {
    display: inline;
    background-color: transparent;
  }
}

// -------------- Input view -----------------

&.input-view {
  .label {
    padding-bottom: @component-padding;
  }

  &.password .scroll-view {
    -webkit-text-security: disc;
  }
}

// -------------- Inspector view -----------------

&.inspector {
  padding: @component-padding;
  overflow-y: auto;

  span[style] {
    color: @text-color-info !important;
  }
}

}

// -------------- Overwrite Autocomplete-Plus style -----------------

// @NOTE: This would pollute global style and could cause some styling issues for users
.autocomplete-plus {
  autocomplete-suggestion-list.select-list.popover-list .suggestion-description {
    max-width: 500px;
  }
}
